Slider Help

Slider Help

So, I have been trying to build a simple slider to act as a scrollbar for a group of images inside a div.

I got really close to getting it work a few times. Ive probably done 4 or 5 tutorials none of which seemed to work.
So, I have back tracked it to be based off the jQuery documentation stuff.
Still no dice.

I'm getting two errors in Chrome using the developer tools :
1st - on line 44 in my html file :  "Uncaught TypeError: Object #<an Object> has no method "slider"". which means that the browser cant find the slider - Im not sure why thats happening.

2nd - in the actual jQuery UI js file : "Uncaught ReferenceError: jQuery is not defined" - I have no idea why that is happening, I just downloaded it fresh off the jQuery UI page with everything selected (no theme though).

Maybe someone out there may catch what I am doing wrong.
I'm supposed to send the client a comp by later today.

Here is my code:

  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Sam Gezari \\ Los Angeles Based Photographer</title>
  7. <link rel="stylesheet" href="main.css" />
  8. <script type="text/javascript" src="jquery-ui-1.8.4.custom.min.js"></script>
  9. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

  11. <script type="text/javascript">
  12.     document.createElement('header');
  13.     document.createElement('nav');
  14.     document.createElement('article');
  15.     document.createElement('section');
  16. document.createElement('footer');
  17. document.createElement('canvas');
  18. </script>

  20. <script type="text/javascript">

  22. $(document).ready(function(){
  23. //--------------------SET CURRENT PAGE-----------------------\\
  26. //--------------------LOAD IMAGES FROM XML--------------------\\
  27. $.get('newimages.xml', function(d){
  28. $(d).find('image').each(function(){
  29. var $image = $(this);
  30. var imageUrl = $image.attr("url");
  32. var html = '<div class="imageContainer">';
  33. html += '<img  src="' + imageUrl + '" />';
  34. html += '</div>';
  36. $('#content').append($(html));
  37. });
  38. });
  40. //--------------------SLIDE INIT-------------------------\\
  41.     var container = $('#mask');
  42.     var items = $('#content');
  43.     var itemsWidth = items.innerWidth() - container.outerWidth();
  44.     
  45.     $('#slider').slider({
  46.         minValue: 0,
  47.         maxValue: itemsWidth,
  48.         handle: '#handle',
  49.         stop: function (event, ui) {
  50.             items.animate({'left' : ui.value * -1}, 1000);
  51.         },
  52.         slide: function (event, ui) {
  53.             items.css({'left' : ui.value * -1});
  54.         }
  55.     });
  56.     
  57. });

  59. </script>
  60. </head>

  62. <body>
  63. <nav>
  64. <h1><span class="light">sam</span> gezari</h1>
  65. <ul id="main">
  66.     <li class="currentPage">new &emsp;&emsp;</li>
  67.         <li><a href="#">past</a> &emsp;&emsp;</li>
  68.         <li><a href="#">book</a> &emsp;&emsp;</li>
  69.         <li><a href="#">video</a> &emsp;&emsp;</li>
  70.         <li><a href="#">cv</a> &emsp;&emsp;</li>
  71.     </ul>
  72. </nav>

  74. <div id="mask">
  75.     <div id="content">    
  76.     </div>
  77. </div>

  79. <div id="slider">
  80.     <div id="handle"></div>
  81. </div>


  84. </body>
  85. </html>

Thanks for any help!